<template>
	<view>
		<view class="box">
			<view class="nav">
				<image class="c_img" :src="avatarUrl"></image>
				<view style="display: flex; flex-direction: column;">
				<view class="c_name">{{associationDetail.name}}</view>
				<view class="c_time">{{associationDetail.createTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="br"></view>
		<view class="content">
			<view class="detail" v-if="associationDetail.brief !=null && associationDetail.brief !=''">{{associationDetail.brief}}</view>
			<view v-else style="text-align: center;">暂无简介信息</view>
		</view>
	</view>
</template>

<script>
	import {
		getQueryAssociationById
	} from "@api"
	import Vue from "vue"
	export default {
		name: "club_detail",
		data() {
			return {
				associationDetail: {}, //校友会详情信息
				associationId: '', //校友会id
				avatarUrl: Vue.prototype.$t.URL.image + 'xiaohui.png',
			}
		},
		onLoad(option) {
			let that = this;
			that.associationId = option.id;
			getQueryAssociationById({id:that.associationId})
			.then(res=>{
			  this.associationDetail = res;
			  if (res.avatarUrl != null && res.avatarUrl != '') {
			  	this.avatarUrl = Vue.prototype.$t.URL.image + res.avatarUrl;
			  }
			  this.associationDetail.createTime = this.formatDate(res.createTime);
			})
		},
		methods: {
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '.' + MM + '.' + d;
			}
		}
	}
</script>
<style>
	.box {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.nav {
		margin-top: 10upx;
		display: flex;
		height: 110upx;

	}

	.c_img {
		margin-left: 20upx;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
	}

	.c_name {
		margin-left: 20upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 48upx;
		font-weight: bold;
	}
	.c_time {
		margin-left: 20upx;
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
	}
	.br {
		margin: 0 auto;
		width: 94%;
		height: 4rpx;
		background: #f3f3f3;
	}

	.content {
		width: 100%;
		padding: 10upx 20upx;
	}

	.detail {
		font-size: 34upx;
	}
</style>
